<template>
	<view class="profit">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">累计收益</block>
		</cu-custom>			
		<view class="top">
			<view class="head">
				<view>
					<view class='money'>
						<image src="/static/assets.png"></image>
						<view class="cash">零钱</view>
						<view class="o-s text-price">{{ Info.total || '0.00' }}</view>
					</view>
				</view>
			</view>	
			<view class="desc">
				<view v-for="(item, index) in integral" :key="index" @tap="change(index)">
					<view>{{ item.name }}</view>
					<block v-if="index === 1">
						<picker mode="date" @change="selectTime">
							<view class="picker">{{ params.time }}</view>
						</picker>
					</block>
					<block v-else>
						<view>{{ item.value }}</view>
					</block>
				</view>
			</view>				
		</view>
		<view class="main">
			<scroll-view scroll-y v-if="list.length" @scrolltolower="getList(1)">
				<navigator hover-class="none" :url="'/pages/spree/profitDetalil?batchcode='+item.batchcode+'&id='+item.id" class="item" v-for="item in list" :key="item.id">
					<view>{{ item.createtime }}</view>
					<view class="tag">{{ item.paytype }}</view>
					<view class="money text-price text-red text-bold text-df">{{ item.reward }}</view>
				</navigator>
			</scroll-view>
			<empty-data v-else>什么也没有发现~</empty-data>
		</view>			
	</view>
</template>

<script>
	import { MyProfit } from '@/common/api/lbt'
	export default {
		name: 'profit',
		data () {
			const currentDate = this.getDate({
				format: true
			})			
			return {
				type: [],
				Info: {},
				list: [],
				integral: [
					{ name: '类型', value: '全部' },
					{ name: '时间', value: '2019-04-1' },
					{ name: '待结算', value: '0.00' },
					{ name: '已结算', value: '0.00' }
				],
				params: {
					type: 1,
					time: currentDate,
					page: 1
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getType (type) {
				switch (type) {
					case 0: 
					this.params.type = 1
					break;
					case 1:
					this.params.type = 2
					break;
					case 2:
					this.params.type = 3
					break;
					case 3:
					this.params.type = 5
					break;
					case 4:
					this.params.type = 16
					break;
				}
			},
			selectTime (e) {
				this.params.time = e.detail.value
				this.getList()
			},
			change (index) {
				switch(index) {
					case 0:
					uni.showActionSheet({
						itemList: this.type,
						success: res => {
							this.integral[0].value = this.type[res.tapIndex]
							this.getType(res.tapIndex)
							this.getList()
						}
					})					
				}
			},
			getList (type = 0) {
				uni.showLoading()
				type ? this.params.page++ : this.params.page = 1
				MyProfit(this.params).then(res => {
					uni.hideLoading()
					let data = res.record.map(item => {
						item.reward = this.utils.Fxied(item.reward)
						return item
					})		
					if (!type) {
						this.type = res.btnArray.map(item => item.name)
						res.usermoney.total = this.utils.Fxied(this.utils.accAdd(+res.usermoney.total_profiy, +res.usermoney.total_money))
						this.Info = res.usermoney
						this.integral[2].value = `¥${this.utils.Fxied(+res.usermoney.total_profiy)}`
						this.integral[3].value = `¥${this.utils.Fxied(+res.usermoney.total_money)}`
					    this.list = data
					} else {
						if (data.length) {
							this.list = [...this.list, ...data]
						} else {
							uni.showToast({
								icon: 'none',
								title: '没有更多数据了~'
							})
						}
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = 1;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="less">
@import '../common/styles/variables.less'; 	
.fixedBody;
.profit {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex-flow: column;
	.top {
		.head {
			background-color:@headBg;
			color:white;
			padding: 50upx 0 50upx;
			& > view {
				display: flex;
				justify-content: center;
				align-items: center;
				.money {
					font-size: @title;
					display: flex;
					flex-flow: column;
					flex-direction: column;
					align-items: center;
					image {
						width: 120upx;
						height: 120upx;
						display: block;
					}
					.cash { }
					.o-s {
						font-size:@title;
						font-weight: bold;
						text {
							font-size:@minSize;
							padding-right: 10upx;
						}
					}
				}
			}
		}
		.desc {
			display: flex;
			align-items: center;
			padding: 15upx 0;
			background-color: white;
			.border-bottom;
			box-shadow: 0 15upx 34upx #dedede;
			z-index: 99;
			& > view {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				flex-flow: column;
				text-align: center;
				position: relative;
				padding: 10upx 0;
				&:nth-of-type(1), &:nth-of-type(2) {
					.arrowRight(#999 ,0, 10upx);
				}
				&:not(:nth-of-type(2)) {
					& > view {
						&:last-of-type {
							font-weight: bold;
							color:@red
						}						
					}
				}
				& > view {
					font-size:@minSize;
				}
				.picker {
					font-size: @minSize;
					font-weight: bold;
					color:@red					
				}				
				&:not(:last-of-type) {
					&::after {
						position: absolute;
						content: '';
						top: 0;
						right: 0;
						border-right: 1px dashed #eaeaea;
						height: 100%;
					}						
				}				
			}
		}			
	}
	.main {
		flex: 1;
		position: relative;
		overflow: hidden;
		background-color: white;
		scroll-view {
			height: 100%;
			.item {
				display: flex;
				padding: 20upx 15upx;
				font-size: @medium;
				align-items: center;
				justify-content: space-between;
				.arrowRight(#666,0 ,15upx);
				.tag {
					background-color: @headBg;
					color:white;
					font-size:@minSize;
					padding: 10upx 20upx;
					border-radius: 10upx;
				}
				.money {
					padding-right: 45upx;
					color: @red;
					font-weight: 600;
					min-width: 220upx;
					text-align: right;
					text {
						font-size:@minSize;
					}
				}
				&:not(:last-of-type) {
					.border-bottom(15upx)
				}
			}
		}
	}
}	
</style>